<template>
  <el-dropdown placement="top">
    <span class="el-dropdown-link">
      <nuxt-link to="/vip">会员中心</nuxt-link>
    </span>
    <el-dropdown-menu slot="dropdown" class="vip">
      <div class="vip-top">
        <div class="vip-top-label">会员特权</div>
        <div class="vip-top-list">
          <a :href="route.path" v-for="route in navVip" :key="route.path">
            <img :src="route.meta.icon" alt />
            <span>{{route.meta.title}}</span>
          </a>
        </div>
      </div>
      <div class="vip-bottom">
        <a href="/vip2">速来领取限时优惠券！</a>
        <button type="button" class="btn btn-primary btn-vip-sell">领券开通</button>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  get navVip() {
    return this.$store.state.navModule.navVip;
  }
}
</script>

<style lang='less' scoped>
a {
  .wh(auto, 48px);
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  line-height: 48px;
  color: #222;
  &:hover {
    text-decoration: none;
  }
}
.el-dropdown-menu {
  top: 36px !important;
}

.vip {
  .wh(376px, auto);
  background: url("~@/assets/images/vip/background.png");
  background-size: 100%;
  background-repeat: no-repeat;
  .vip-top-label {
    margin: 10px;
  }
  .vip-top-list {
    margin: 10px;
    .flex-box(row, space-between);
    a {
      padding: 0;
      .wh(56px, 84px);
      .flex-box(column);
    }
    span {
      line-height: 38px;
    }
  }
  .vip-bottom {
    margin-top: 10px;
    .flex-box(row, space-between);
  }
  .btn-vip-sell {
    background: linear-gradient(270deg, #f8c883 0, #fae8d0 100%);
    border-radius: 16px;
    border: none;
    color: #b87100;
  }
}
img {
  .wh(56px);
}
</style>